<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Related Combobox - jQuery EasyUI Demo</title>
        <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.combo.extend.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.combobox.extend.js"></script>
        <!--<script type="text/javascript" src="../../extend/jquery.easyui.validatebox.extend.js"></script>-->
        <!--<script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>-->
        <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
        <script type="text/javascript">
            SyntaxHighlighter.config.tagName = "textarea";
            SyntaxHighlighter.all();
        </script>
        <script type="text/javascript">
            $(function(){
                $('#ccb1').combobox({
                    valueField: 'id',
                    textField: 'text',
                    editable: false,
                    url: '../combobox/combobox_data2.json',
                    customAttr:{
                        headervalue: '--请选择--',
                        slave:{
                            id: 'ccb2',
                            remote: false
                        }
                    }
                })
                .combobox('followCustomHandle');

                $('#ccb2').combobox({
                    valueField: 'id',
                    textField: 'text',
                    editable: false,
                    customAttr:{
                        headervalue: '--请选择--',
                        slave:{
                            id: 'ccb3',
                            remote: false
                        }
                    }
                })
                .combobox('followCustomHandle');

                $('#ccb3').combobox({
                    valueField: 'id',
                    textField: 'text',
                    editable: false,
                    customAttr:{
                        headervalue: '--请选择--'
                    }
                })
                .combobox('followCustomHandle');
            });

            function doClear(target){
                $(target).combobox('clear');
            }

            function doGetValue(target){
                alert($(target).combobox('getValue'))
            }
        </script>
    </head>
    <body>
        <!--<h2>使用本地数据联动操作</h2>-->
        <!--&lt;!&ndash; Using a local data cascade operation &ndash;&gt;-->
        <!--<div style="padding-bottom: 5px;">-->
            <!--Combobox1: <input id="ccb1">-->
            <!--<input type="button" value="clear" onclick="doClear('#ccb1')">-->
            <!--<input type="button" value="getValue" onclick="doGetValue('#ccb1')">-->
        <!--</div>-->
        <!--<div style="padding-bottom: 5px;">-->
            <!--Combobox2: <input id="ccb2">-->
            <!--<input type="button" value="clear" onclick="doClear('#ccb2')">-->
            <!--<input type="button" value="getValue" onclick="doGetValue('#ccb2')">-->
        <!--</div>-->
        <!--<div style="padding-bottom: 5px;">-->
            <!--Combobox3: <input id="ccb3">-->
            <!--<input type="button" value="clear" onclick="doClear('#ccb3')">-->
            <!--<input type="button" value="getValue" onclick="doGetValue('#ccb3')">-->
        <!--</div>-->




        <div class="easyui-tabs" data-options="fit: true, plain: true">
            <div data-options="title: 'Demo'">
                <h2>使用本地数据联动操作</h2>
                <p>联动个数受数据结构限制</p>
                <div style="padding-bottom: 5px;">
                    Combobox1: <input id="ccb1">
                    <input type="button" value="clear" onclick="doClear('#ccb1')">
                    <input type="button" value="getValue" onclick="doGetValue('#ccb1')">
                </div>
                <div style="padding-bottom: 5px;">
                    Combobox2: <input id="ccb2">
                    <input type="button" value="clear" onclick="doClear('#ccb2')">
                    <input type="button" value="getValue" onclick="doGetValue('#ccb2')">
                </div>
                <div style="padding-bottom: 5px;">
                    Combobox3: <input id="ccb3">
                    <input type="button" value="clear" onclick="doClear('#ccb3')">
                    <input type="button" value="getValue" onclick="doGetValue('#ccb3')">
                </div>
            </div>
            <div data-options="title: 'Code'" style="font-size: 14px;">
                <p>javascript:</p>
                <textarea class="brush: js; highlight:[7,8,9,10,11,12,13,15,22,23,24,25,26,27,29,35,36,37,39]">
                        $(function(){
                            $('#ccb1').combobox({
                                valueField: 'id',
                                textField: 'text',
                                editable: false,
                                url: '../combobox/combobox_data2.json',
                                customAttr:{
                                    headervalue: '--请选择--',
                                    slave:{
                                        id: 'ccb2',
                                        remote: false
                                    }
                                }
                            })
                            .combobox('followCustomHandle');

                            $('#ccb2').combobox({
                                valueField: 'id',
                                textField: 'text',
                                editable: false,
                                customAttr:{
                                    headervalue: '--请选择--',
                                    slave:{
                                        id: 'ccb3',
                                        remote: false
                                    }
                                }
                            })
                            .combobox('followCustomHandle');

                            $('#ccb3').combobox({
                                valueField: 'id',
                                textField: 'text',
                                editable: false,
                                customAttr:{
                                    headervalue: '--请选择--'
                                }
                            })
                            .combobox('followCustomHandle');
                        });
                </textarea>

                <p>html:</p>
                <textarea class="brush: html;">
                    <body>
                        <h2>使用本地数据联动操作</h2>
                        <p>联动个数受数据结构限制</p>
                        <div style="padding-bottom: 5px;">
                            Combobox1: <input id="ccb1">
                            <input type="button" value="clear" onclick="doClear('#ccb1')">
                            <input type="button" value="getValue" onclick="doGetValue('#ccb1')">
                        </div>
                        <div style="padding-bottom: 5px;">
                            Combobox2: <input id="ccb2">
                            <input type="button" value="clear" onclick="doClear('#ccb2')">
                            <input type="button" value="getValue" onclick="doGetValue('#ccb2')">
                        </div>
                        <div style="padding-bottom: 5px;">
                            Combobox3: <input id="ccb3">
                            <input type="button" value="clear" onclick="doClear('#ccb3')">
                            <input type="button" value="getValue" onclick="doGetValue('#ccb3')">
                        </div>
                    </body>
                </textarea>
            </div>
        </div>

    </body>
</html>